<template>
	<view>
		<u-popup mode="bottom" :show="skuShow" zIndex="99999">
			<view class="skubox pt-2 box-sizing" :style="{'height':page === 'playerhome'?'75dvh':'60dvh'}">
				<view class="flex align-center justify-center position-relative py-2 border-bottom">
					<text>{{$t('hhh.t61')}}</text>
					<u-icon class="position-absolute right-0 top-0 mr-2" name="close" size="20px" @tap="skuShow = false"></u-icon>
				</view>

				<view class="sku-content overflow-y">
					<view class="bg-white p-2 flex align-center rounded-lg my-2">
						<image class="rounded bgE9E5FF" :src="detail.heading" mode="aspectFill"
							style="width: 176rpx;height: 176rpx;">
						</image>
						<view class="flex flex-column flex-1 ml-2">
							<view class="flex align-center">
								<text class="fs-32 text-black font-weight-light">{{detail.nickname}}</text>
								<image v-if="detail.is_verified === 1" src="/static/imgs/renzheng.png" mode="aspectFill"
									class="w-32 h-32 ml-1">
								</image>
								<image v-if="detail.nationality && detail.nationality.logo" :src="detail.nationality.logo"
									mode="aspectFill" class="w-32 h-32 ml-1 rounded-circle flex-shrink"></image>
								<view class="flex align-center bgFF4CBE rounded-circle px-1 ml-1">
									<image :src="`/static/imgs/${detail.gender === 2?'sex':'sex1'}.png`" mode="aspectFill"
										style="width: 20rpx;height: 20rpx;"></image>
									<text class="text-white fs-20">{{detail.age}}</text>
								</view>
								<view class="flex align-center flex-1 justify-end">
									<image src="/static/imgs/hot_icon.png" mode="aspectFill" class="w-36 h-36"></image>
									<text class="ftFF685E fs-26 font-weight-light">{{abbreviateNumber(detail.fire_balance)}}</text>
								</view>
							</view>
							<view class="flex align-center mt-2">
								<view class="rounded px-1 py-05 bgD5EDF8 flex align-center ">
									<image src="/static/imgs/game_icon.png" mode="aspectFill" class="w-32 h-32"></image>
									<text class="ft666666 fs-22">游戏</text>
								</view>
							</view>
							<view class="flex align-center justify-between mt-3">
								<view class="flex align-center">
									<view class="flex align-center ftFF0073">
										<text class="fs-34 font-weight-light">{{detail.price}}</text>
										<image src="/static/imgs/jinbi.png" mode="aspectFill" class="w-28 h-28 mx-1"></image>
									</view>
									<text class="fs-24 text-black letter-spacing ml-1">/ {{$t('hhh.t7')}}</text>
								</view>
								<u-number-box v-model="num" inputWidth="50"></u-number-box>
							</view>
						</view>
					</view>

					<view class="fs-28 font-weight-bold text-black mx-2">{{$t('hhh.t63')}}</view>
					<view class="flex align-center mt-2 mx-2 mb-4">
						<view class="rounded  px-3 py-1 bgF6F7F9 flex align-center border  mr-2"
							v-for="(item,index) in detail.interests" :key="index"
							:class="curSku === item.id?'bdcolor5 ft110124':'ft666666'" @tap="changeInterest(item)">
							<image :src="item.icon" mode="aspectFill" class="w-43 h-43"></image>
							<text class="fs-32 ml-1">{{item.name}}</text>
						</view>
					</view>

					<view class="fs-28 font-weight-bold text-black mx-2">{{$t('hhh.t64')}}</view>
					<view class="flex align-center mt-2 mx-2 flex-wrap">
						<view class="rounded  px-3 py-1 bgF6F7F9 flex align-center border  mr-2 mb-2"
							v-for="(item,index) in hourList" :key="index" :class="curHour === item.num?'bdcolor5 ft110124':'ft666666'"
							@tap="changeHour(item)">
							<view class="fs-32 text-ellipsis">{{item.name}}</view>
						</view>
					</view>
					<view class="border mx-2 rounded-lg p-1 box-sizing">
						<u--input :placeholder="$t('hhh.t69')" border="surround" v-model="customtime" :customStyle="{
									'border':0
								}" @input="changeInput"></u--input>
					</view>

					<template v-if="page === 'playerhome'">
						<view class="flex align-center justify-between mx-2 mt-5 text-black">
							<text>{{$t('hhh.t65')}}</text>
							<view class="flex align-center fs-28 ft999999" @tap="openDate">
								<text>{{selectDate || $t('hhh.t66')}}</text>
								<image src="/static/imgs/right3.png" mode="aspectFill" class="w-28 h-28 ml-1"></image>
							</view>
						</view>
						<view class="flex align-center justify-between mx-2 mt-3 text-black">
							<text>{{$t('hhh.t67')}}</text>
							<view class="flex align-center fs-28 ft999999" @tap="openTime">
								<text>{{selectTime || $t('hhh.t66')}}</text>
								<image src="/static/imgs/right3.png" mode="aspectFill" class="w-28 h-28 ml-1"></image>
							</view>
						</view>
						<view class="flex align-center justify-between mx-2 mt-3 text-black">
							<text>Total amount</text>
							<view class="flex align-center ftFF0073">
								<text class="fs-34 font-weight-light">{{total_amount}}</text>
								<image src="/static/imgs/jinbi.png" mode="aspectFill" class="w-28 h-28 mx-1"></image>
							</view>
						</view>
					</template>
					<u-gap height="100" bgColor="transparent"></u-gap>
					<view class="flex align-center justify-center donebtn mx-auto text-white fs-28 font-weight-bold mx-2"
						@tap="navTo('/pages/checkout/checkout')">
						{{page !== 'playerhome'?$t('hhh.t80'):$t('hhh.t68')}}
					</view>
					<u-gap height="50" bgColor="transparent"></u-gap>
				</view>
			</view>
		</u-popup>

		<u-popup mode="bottom" :show="dateShow" zIndex="999992" overlayStyle="z-index:999991">
			<view class=" box-sizing datebox">
				<view class="flex align-center justify-center position-relative py-2 border-bottom">
					<u-icon class="position-absolute left-0 top-0 ml-2 mt-2" name="close" size="20px"
						@tap="dateShow = false"></u-icon>
					<text class="flex-1 text-center font-weight-bold">{{$t('hhh.t65')}}</text>
					<text class="ft300D45 fs-28 mr-2 position-absolute right-0 top-0 mt-2"
						@tap="dateComplete">{{$t('hhh.t51')}}</text>
				</view>

				<view class="date-list overflow-y flex flex-wrap justify-center py-2">
					<block v-for="(item,index) in dateList" :key="index">
						<view class="rounded-lg  px-3 flex align-center border  mr-2 mb-2 dateItem"
							:class="curDate === item?'bdcolor5 ft110124':'ft666666'" @tap="changeDate(item)">
							{{item}}
						</view>
					</block>
				</view>
			</view>
		</u-popup>


		<u-popup mode="bottom" :show="timeShow" zIndex="999992" overlayStyle="z-index:999991">
			<view class=" box-sizing datebox">
				<view class="flex align-center justify-center position-relative py-2 border-bottom">
					<u-icon class="position-absolute left-0 top-0 ml-2 mt-2" name="close" size="20px"
						@tap="timeShow = false"></u-icon>
					<text class="flex-1 text-center font-weight-bold">{{$t('hhh.t67')}}</text>
					<text class="ft300D45 fs-28 mr-2 position-absolute right-0 top-0 mt-2"
						@tap="timeComplete">{{$t('hhh.t51')}}</text>
				</view>

				<view class="date-list overflow-y flex flex-wrap p-2">
					<block v-for="(item,index) in timeList" :key="index">
						<view class="rounded-lg  flex align-center justify-center border  mb-2 dateItem w-32bf timeItem"
							:class="curTime === item?'bdcolor5 ft110124':'ft666666'" @tap="changeTime(item)">
							{{item}}
						</view>
					</block>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		abbreviateNumber,
		getLastFifteenDays,
		getDayHours
	} from '@/utils/common.js'
	import HttpApi from '@/api/httpApi';
	export default {
		props: {
			page: {
				type: String,
				default: ''
			},
			detail: {
				type: Object,
				default: () => {}
			}
		},
		data() {
			return {
				curSku: '',
				curHour: '',
				skuShow: false,
				num: 1,
				customtime: '',
				dateShow: false,
				curDate: '',
				selectDate: '',
				timeList: [],
				timeShow: false,
				curTime: '',
				selectTime: '',
				interestTabs: []
			}
		},
		computed: {
			hourList() {
				return [{
					name: 'Half Hour',
					num: 0.5
				}, {
					name: '1 Hour',
					num: 1
				}]
			},
			dateList() {
				return getLastFifteenDays('YYYY/MM/DD')
			},
			total_amount() {
				if (!this.customtime && !this.curHour) {
					return this.detail.price * 1 * this.num
				}
				if (!this.customtime) {
					return this.detail.price * Number(this.curHour) * this.num
				}
				return this.detail.price * Number(this.customtime) * this.num
			},
			total_hours() {
				return (Number(this.customtime) || Number(this.curHour)) * this.num
			}
		},
		methods: {
			abbreviateNumber,
			changeInput() {
				this.curHour = ''
			},
			show() {
				this.skuShow = true
			},
			hide() {
				this.skuShow = false
			},
			changeInterest(item) {
				this.curSku = item.id
			},
			changeHour(item) {
				if (this.curHour === item.num) {
					this.curHour = ''
					return
				}
				this.curHour = item.num
			},
			openDate() {
				if (this.selectDate !== '') {
					this.curDate = this.selectDate
				} else {
					this.curDate = ''
				}
				this.dateShow = true
			},
			changeDate(item) {
				if (this.curDate === item) {
					this.curDate = ''
					return
				}
				this.curDate = item
			},
			dateComplete() {
				if (!this.curDate) {
					uni.$tools.toast(this.$t('hhh.t71'))
					return
				}
				this.dateShow = false
				this.selectTime = ''
				this.selectDate = this.curDate
			},
			openTime() {
				if (this.selectDate) {
					const date = this.selectDate.split('/').join('-')
					this.timeList = getDayHours(date)
				} else {
					const now = new Date().toISOString().split('T')[0]
					this.timeList = getDayHours(now)
				}
				this.timeShow = true
			},
			changeTime(item) {
				if (this.curTime === item) {
					this.curTime = ''
					return
				}
				this.curTime = item
			},
			timeComplete() {
				if (!this.curTime) {
					uni.$tools.toast(this.$t('hhh.t72'))
					return
				}
				this.timeShow = false
				this.selectTime = this.curTime
			},
			navTo(url) {
				if (this.page !== 'playerhome') {
					if (!this.curSku) {
						uni.$tools.toast('Please select a service')
						return
					}
					const club_id = uni.getStorageSync('club_id')
					this.$emit('submit', {
						peipei_id: this.detail.id,
						service_type: this.curSku,
						hours: this.total_hours,
						club_id: club_id || ''
					})
					return
				}
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.skubox {
		.sku-content {
			height: calc(100% - 44px);
		}
	}

	.datebox {
		height: 50dvh;

		.date-list {
			height: calc(100% - 44px);

			.dateItem {
				height: 80rpx;
			}

			.timeItem:nth-child(3n-1) {
				margin: 0 16rpx;
			}
		}
	}
</style>